import { Form, Input, message, Modal, Button, Space, Checkbox, Radio } from 'antd';
import React, { useState } from 'react';
import styles from './index.less';
import { createInfo, exportDataset, IntlInit, snake2camel } from '@/services/utils';
import type { Project } from '@/services/web/models/';
import { IntlInitJsx } from '@/components/PPIntl';

type PPExportProps = {
  project: Project;
  visible?: boolean;
};

const PPExportModal: React.FC<PPExportProps> = (props) => {
  const intl = IntlInit('component.PPExportModal');
  const intlJsx = IntlInitJsx('component.PPExportModal');
  const [includeInvalidData, setIncludeInvalidData] = useState<boolean>(false);
  const [loading, setLoading] = useState<boolean>(false);
  const [visible, setVisible] = useState<boolean>(false);
  const [form] = Form.useForm();

  const taskCategory = snake2camel(props.project?.task_category?.name);
  const labelFormats =
    taskCategory && createInfo[taskCategory]?.labelFormats
      ? Object.keys(createInfo[taskCategory].labelFormats)
      : [];

  // 只有目标检测项目才包含 labelme 格式
  if (taskCategory === 'detection') {
    labelFormats.push('labelme');
  }

  const [labelFormat, setLabelFormat] = useState<string>();

  return (
    <span hidden={props.visible == false}>
      <Button type="primary" onClick={() => setVisible(true)}>
        {intlJsx('title')}
      </Button>
      <Modal
        className={styles.modal}
        title={intlJsx('title')}
        visible={visible}
        onCancel={() => setVisible(false)}
        footer={null}
      >
        <Form
          form={form}
          name="basic"
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 16 }}
          initialValues={{ remember: false }}
          onFinish={(values) => {
            console.log('values', values);
            setLoading(true);
            exportDataset(props.project.project_id, values.path, values.labelFormat, values.segMaskType, includeInvalidData)
              .then((res) => {
                message.success(intlJsx('exportSuccess'));
                setVisible(false);
              })
              .catch((err) => {
                console.log(err);
              })
              .finally(() => {
                setLoading(false);
              });
          }}
          autoComplete="off"
        >
          <Form.Item
            label={intl('path')}
            name="path"
            rules={[{ required: true, message: intlJsx('nullPath') }]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            name="includeInvalidData"
            valuePropName="checked"
            label={'导出数据类型'}
            labelCol={{ span: 6 }}
            wrapperCol={{ span: 16 }}
          >
            <Checkbox
              checked={includeInvalidData}
              onChange={(e) => setIncludeInvalidData(e.target.checked)}
            >
              {'包含不合格数据'}
            </Checkbox>
          </Form.Item>

          <Form.Item
            name="labelFormat"
            label={<p>{intlJsx('labelFormat')} </p>}
            labelCol={{ span: 6 }}
            wrapperCol={{ span: 16 }}
            rules={[{ required: true, message: intlJsx('nullLabelFormat') }]}
            style={{
              fontSize: '1.5rem',
            }}
          >
            <Radio.Group
              size="large"
              style={{ height: '3.13rem' }}
              onChange={() => {
                setLabelFormat(form.getFieldValue('labelFormat'));
              }}
            >
              {labelFormats.map((k) => (
                <Radio key={k} value={k}>
                  {intlJsx(snake2camel(k), 'global.labelFormat')}
                </Radio>
              ))}
            </Radio.Group>
          </Form.Item>
          <Form.Item
            name="segMaskType"
            label={intl('segMaskType', 'component.PPCreater')}
            labelCol={{
              span: 6,
            }}
            wrapperCol={{
              span: 16,
            }}
            style={{
              fontSize: '1.5rem',
              display:
                labelFormat == 'mask' && taskCategory == 'semanticSegmentation'
                  ? undefined
                  : 'none',
            }}
          >
            <Radio.Group size="large" style={{ height: '3.13rem' }}>
              {['pesudo', 'grayscale'].map((k) => (
                <Radio key={k} value={k}>
                  {intlJsx(k, 'global.segMaskType')}
                </Radio>
              ))}
            </Radio.Group>
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Space>
              <Button
                onClick={() => {
                  setVisible(false);
                  form.resetFields();
                }}
              >
                {intlJsx('cancel', 'global')}
              </Button>
              <Button type="primary" htmlType="submit" loading={loading}>
                {intlJsx('export')}
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Modal>
    </span>
  );
};

export default PPExportModal;